<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>订单中心 - 邦伴用户端</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary: #ff7e2d;
      --primary-light: #fff3ea;
      --border: #f0f0f0;
      --text-main: #222;
      --text-sub: #888;
    }
    
    body {
      font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
      background-color: #f8f8f8;
      color: var(--text-main);
    }
    
    .app-container {
      max-width: 480px;
      margin: 0 auto;
      background: #fff;
      min-height: 100vh;
      position: relative;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    }
    
    .primary-color {
      color: var(--primary);
    }
    
    .primary-bg {
      background-color: var(--primary);
    }
    
    .order-card {
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .bottom-nav {
      border-top: 1px solid var(--border);
    }
    
    .status-waiting {
      color: #f59e0b;
    }
    
    .status-progress {
      color: #3b82f6;
    }
    
    .status-completed {
      color: #10b981;
    }
    
    .status-canceled {
      color: #9ca3af;
    }
    
    .tab-active {
      color: var(--primary);
      border-bottom: 2px solid var(--primary);
    }
    
    .order-status-badge {
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 10px;
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      border: 1px solid var(--border);
      color: var(--text-sub);
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="sticky top-0 z-10 bg-white border-b border-gray-100 px-4 py-3 flex items-center">
      <h1 class="text-lg font-medium flex-1 text-center">订单中心</h1>
    </div>
    
    <!-- 订单分类 -->
    <div class="flex border-b border-gray-100 bg-white">
      <div class="flex-1 text-center py-3 tab-active">
        全部
      </div>
      <div class="flex-1 text-center py-3 text-gray-500">
        待付款
      </div>
      <div class="flex-1 text-center py-3 text-gray-500">
        服务中
      </div>
      <div class="flex-1 text-center py-3 text-gray-500">
        待评价
      </div>
    </div>
    
    <!-- 订单搜索 -->
    <div class="p-3 bg-white">
      <div class="flex items-center bg-gray-100 rounded-lg px-3 py-2">
        <i class="fas fa-search text-gray-400 mr-2"></i>
        <input type="text" placeholder="搜索订单" class="bg-transparent w-full focus:outline-none text-sm">
      </div>
    </div>
    
    <!-- 订单列表 -->
    <div class="p-4">
      <!-- 订单1 -->
      <div class="order-card bg-white p-4 mb-4">
        <div class="flex justify-between items-center border-b border-gray-100 pb-3">
          <div class="flex items-center">
            <i class="fas fa-hospital-alt mr-2 primary-color"></i>
            <span>医院陪护</span>
          </div>
          <div class="status-progress">服务中</div>
        </div>
        
        <div class="py-3 border-b border-gray-100">
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">医院：</div>
            <div>第一人民医院</div>
          </div>
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">科室：</div>
            <div>骨科</div>
          </div>
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">床号：</div>
            <div>6号楼501-3</div>
          </div>
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">护工：</div>
            <div>张阿姨</div>
          </div>
          <div class="flex">
            <div class="w-20 text-gray-500">时间：</div>
            <div>2023-09-15 ~ 2023-09-22</div>
          </div>
        </div>
        
        <div class="flex justify-between items-center pt-3">
          <div>
            <span class="text-sm text-gray-500 mr-1">订单金额：</span>
            <span class="primary-color font-bold">¥2,786</span>
          </div>
          <div class="flex space-x-2">
            <button class="btn-outline text-xs px-3 py-1 rounded-full">查看详情</button>
            <button class="btn-primary text-xs px-3 py-1 rounded-full">联系客服</button>
          </div>
        </div>
      </div>
      
      <!-- 订单2 -->
      <div class="order-card bg-white p-4 mb-4">
        <div class="flex justify-between items-center border-b border-gray-100 pb-3">
          <div class="flex items-center">
            <i class="fas fa-home mr-2 primary-color"></i>
            <span>居家照护</span>
          </div>
          <div class="status-waiting">待付款</div>
        </div>
        
        <div class="py-3 border-b border-gray-100">
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">地址：</div>
            <div>朝阳区望京SOHO T1-2301</div>
          </div>
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">服务项：</div>
            <div>居家看护、生活照料</div>
          </div>
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">护工：</div>
            <div>未指定</div>
          </div>
          <div class="flex">
            <div class="w-20 text-gray-500">时间：</div>
            <div>2023-09-25 ~ 2023-10-02</div>
          </div>
        </div>
        
        <div class="flex justify-between items-center pt-3">
          <div>
            <span class="text-sm text-gray-500 mr-1">订单金额：</span>
            <span class="primary-color font-bold">¥3,504</span>
            <div class="text-xs text-gray-400">剩余支付时间: 23:45:30</div>
          </div>
          <div class="flex space-x-2">
            <button class="btn-outline text-xs px-3 py-1 rounded-full">取消</button>
            <button class="btn-primary text-xs px-3 py-1 rounded-full">去支付</button>
          </div>
        </div>
      </div>
      
      <!-- 订单3 -->
      <div class="order-card bg-white p-4 mb-4">
        <div class="flex justify-between items-center border-b border-gray-100 pb-3">
          <div class="flex items-center">
            <i class="fas fa-hospital-alt mr-2 primary-color"></i>
            <span>医院陪护</span>
          </div>
          <div class="status-completed">已完成</div>
        </div>
        
        <div class="py-3 border-b border-gray-100">
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">医院：</div>
            <div>中心医院</div>
          </div>
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">科室：</div>
            <div>内科</div>
          </div>
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">床号：</div>
            <div>3号楼208-1</div>
          </div>
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">护工：</div>
            <div>李大姐</div>
          </div>
          <div class="flex">
            <div class="w-20 text-gray-500">时间：</div>
            <div>2023-09-01 ~ 2023-09-03</div>
          </div>
        </div>
        
        <div class="flex justify-between items-center pt-3">
          <div>
            <span class="text-sm text-gray-500 mr-1">订单金额：</span>
            <span class="primary-color font-bold">¥1,134</span>
          </div>
          <div class="flex space-x-2">
            <button class="btn-outline text-xs px-3 py-1 rounded-full">再次预约</button>
            <button class="btn-primary text-xs px-3 py-1 rounded-full">去评价</button>
          </div>
        </div>
      </div>
      
      <!-- 订单4 -->
      <div class="order-card bg-white p-4 mb-4">
        <div class="flex justify-between items-center border-b border-gray-100 pb-3">
          <div class="flex items-center">
            <i class="fas fa-baby mr-2 primary-color"></i>
            <span>母婴服务</span>
          </div>
          <div class="status-canceled">已取消</div>
        </div>
        
        <div class="py-3 border-b border-gray-100">
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">地址：</div>
            <div>海淀区中关村南大街5号</div>
          </div>
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">服务项：</div>
            <div>月嫂服务</div>
          </div>
          <div class="flex mb-2">
            <div class="w-20 text-gray-500">月嫂：</div>
            <div>王阿姨</div>
          </div>
          <div class="flex">
            <div class="w-20 text-gray-500">时间：</div>
            <div>2023-08-15 ~ 2023-09-15</div>
          </div>
        </div>
        
        <div class="flex justify-between items-center pt-3">
          <div>
            <span class="text-sm text-gray-500 mr-1">订单金额：</span>
            <span class="primary-color font-bold">¥12,600</span>
          </div>
          <div class="flex space-x-2">
            <button class="btn-outline text-xs px-3 py-1 rounded-full">删除订单</button>
            <button class="btn-primary text-xs px-3 py-1 rounded-full">重新预约</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部空间 -->
    <div class="pb-20"></div>
    
    <!-- 底部导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 z-10 bg-white bottom-nav" style="max-width: 480px; margin: 0 auto;">
      <div class="grid grid-cols-5 py-1">
        <a href="index.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-home text-lg"></i>
          <span class="text-xs mt-1">首页</span>
        </a>
        <a href="orders.html" class="flex flex-col items-center py-1 tab-active">
          <i class="fas fa-clipboard-list text-lg"></i>
          <span class="text-xs mt-1">订单</span>
        </a>
        <a href="messages.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-comment-dots text-lg"></i>
          <span class="text-xs mt-1">消息</span>
        </a>
        <a href="membership.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-crown text-lg"></i>
          <span class="text-xs mt-1">会员</span>
        </a>
        <a href="profile.html" class="flex flex-col items-center py-1 text-gray-500">
          <i class="fas fa-user text-lg"></i>
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </div>
  </div>
  
  <script>
    // 简单的导航激活状态切换
    document.addEventListener('DOMContentLoaded', function() {
      const navItems = document.querySelectorAll('.bottom-nav a');
      navItems.forEach(item => {
        item.addEventListener('click', function() {
          navItems.forEach(i => i.classList.remove('tab-active'));
          navItems.forEach(i => i.classList.add('text-gray-500'));
          this.classList.add('tab-active');
          this.classList.remove('text-gray-500');
        });
      });
      
      // 订单分类标签切换
      const tabItems = document.querySelectorAll('.app-container > div:nth-child(2) > div');
      tabItems.forEach(item => {
        item.addEventListener('click', function() {
          tabItems.forEach(i => i.classList.remove('tab-active'));
          tabItems.forEach(i => i.classList.add('text-gray-500'));
          this.classList.add('tab-active');
          this.classList.remove('text-gray-500');
        });
      });
    });
  </script>
</body>
</html> 